<template>
<div class="mainsu">
<div class="main_spac1">
	<div class="main_white padding10 paddingBottom20">
	<div class="mainor_form">
		<div class="mainor_te">
		<router-link class="mainor_tea" to="/commodity/devlist/add"
			>新增设备</router-link
		>
		<!-- <el-button class="mainor_tea">新增设备</el-button> -->
		<el-button>导出</el-button>
		</div>
		<el-form
		:inline="true"
		:model="form"
		class="demo-form-inline"
		ref="userListFrom"
		label-width="70px"
		>
		<el-form-item label="设备名称" prop="name">
			<el-input
			v-model.trim="form.name"
			placeholder="设备名称"
			clearable
			class="wid220"
			></el-input>
		</el-form-item>
		<el-form-item label="上架状态" prop="status">
			<el-select
			v-model="form.status"
			placeholder="上架状态"
			class="wid220"
			clearable
			>
			<el-option label="所有" value=""></el-option>
			<el-option
				v-for="(item, index) in status_list"
				:key="index"
				:label="item"
				:value="index"
			></el-option>
			</el-select>
		</el-form-item>
		<el-form-item>
			<el-button
			class="reset marginLeft10"
			type="primary"
			@click="reset"
			>重置</el-button
			>
			<el-button
			type="primary"
			@click="getArticleList"
			:loading="listLoading"
			>搜索</el-button
			>
		</el-form-item>
		</el-form>
	</div>
	<div class="main_table marginTop10" style="min-height: 550px">
		<el-table
		ref="multipleTable"
		v-loading="listLoading"
		:data="list"
		element-loading-text="加载中"
		fit
		border
		highlight-current-row
		>
		<el-table-column type="expand" class-name="main_hei">
			<template  slot-scope="props">
			<el-table
				:data="props.row.sku_list"
				class="mainex_ta"
				fit
				:highlight-current-row="false"
			>
				<el-table-column label width="40" align="right" />
				<el-table-column label="规格型号" prop="model" width="200" />
				<el-table-column label="品牌" prop="brand" />
				<el-table-column label="描述" prop="describe" />
				<el-table-column label="单位" prop="unit" />
				<el-table-column label="编码(sku)" prop="sku" />
				<el-table-column label="原价" prop="price_original" />
				<el-table-column label="售价" prop="price_selling" />
				<el-table-column label="库存" prop="inventory" />
				<el-table-column label="售卖状态" prop="status">
					<template slot-scope="scope">
						{{ status_list[scope.row.status]}}
					</template>
				</el-table-column>
			</el-table>
			</template>
		</el-table-column>
		<el-table-column
			label="设备图片"
			width="150"
			prop="pic"
			class-name="main_hei"
		>
			<template slot-scope="scope">
			<div class="demo-image__error mainor_im">
				<el-image fit="fill" :src="imgBase+scope.row.pic">
				<!-- :preview-src-list="scope.row.pics" -->
				<div slot="error" class="image-slot">
					<img :src="puzzleImg" />
				</div>
				</el-image>
			</div>
			</template>
		</el-table-column>
		<el-table-column label="设备名称" width="150" prop="name" />
		<el-table-column label="编码(spu)" prop="spu" />
		<el-table-column label="原价" prop="original" />
		<el-table-column label="售价" prop="selling" />
		<el-table-column label="上架状态" prop="status">
			<template slot-scope="scope">
			<span>
				{{ status_list[scope.row.status] }}
			</span>
			</template>
		</el-table-column>

		<el-table-column label="管理操作" width="120" prop="">
			<template slot-scope="scope">
				<el-link @click="toEdit(scope.row.id)"  type="success"> 编辑</el-link>
			</template>
		</el-table-column>
		</el-table>
	</div>
	<div class="main_page boxdq">
		<div></div>
		<!-- 分页 -->
		<div class="main_page_r">
		<el-pagination
			:current-page="current.page"
			:page-sizes="[20, 30, 50, 100]"
			:page-size="limit"
			layout="total, sizes, prev, pager, next, jumper"
			:total="totalCount"
			background
			@size-change="changeLimit"
			@current-change="changePage"
		/>
		</div>
	</div>
	</div>
</div>
</div>
</template>

<script>
import { goods_devList } from "@/api/commodity/commodityDevlist";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import dateOption from "@/options/dateOption";
import { parseTime } from "@/utils/index";
import { puzzleImg } from "@/api/currency";

export default {
components: {},
data() {
	return {
		imgBase:'',
		puzzleImg,
		// 时间
		parseTime,
		// 分页
		current: {
		page: 1,
		size: 20,
		},
		limit: 20,
		totalCount: 1,
		// 列表数据
		list: [],
		// inventory_list: {},
		status_list: {},
		listLoading: false,
		// 搜索
		form: {
		status: "",
		name: "",
		},
		pickerOptions: dateOption,
	};
},
created() {
	this.imgBase = this.$store.state.user.avatar.img_prefix;
	this.goods_devList();
},
methods: {
// 搜索
getArticleList() {
	this.current.page = 1;
	this.goods_devList();
},
reset() {
	this.$refs["userListFrom"].resetFields();
	this.goods_devList();
},
// 分页
changeLimit(pageSize) {
	this.current.size = pageSize;
	this.goods_devList();
},
changePage(page) {
	this.current.page = page;
	this.goods_devList();
},
// 列表
goods_devList() {
	this.listLoading = true;
	let data = Object.assign(
	{
		sign: Md5(
		objKeySort(
			Object.assign(apiUrl().name, this.list_form(), this.current)
		) + apiUrl().appsecret
		),
	},
	apiUrl().name,
	this.list_form(),
	this.current
	);
	goods_devList(data).then((res) => {
	if (res.errcode == 0) {
		this.listLoading = false;
		this.list = this.changePrice(res.data.list);
		// this.list = res.data.list;
		// this.inventory_list = res.data.inventory_list;
		this.status_list = res.data.status_list;
		this.totalCount = res.data.count;
	} else {
		this.$message.error(res.errmsg);
	}
	});
},
//处理价格
changePrice(data) {
	var array = JSON.parse(JSON.stringify(data));
	for (let i in array) {
		//算出价格范围
		if (array[i].sku_list.length > 1) {
			array[i].original = this.total(array,i,'price_original');
			array[i].selling = this.total(array,i,'price_selling');
		} else if(array[i].sku_list.length==1){
			array[i].original = '￥'+array[i].sku_list[0].price_original;
			array[i].selling = '￥'+array[i].sku_list[0].price_selling;
		}
	}
	return array;
},
total(array,i,oldname){
	var min, max;
	min = array[i].sku_list[0][oldname];
	if (array[i].sku_list[1][oldname] < min) {
		max = Number(array[i].sku_list[0][oldname]);
		min = Number(array[i].sku_list[1][oldname]);
	} else {
		max = Number(array[i].sku_list[1][oldname]);
		min = Number(array[i].sku_list[0][oldname]);
	}
	for (let y in array[i].sku_list) {
		if (Number(array[i].sku_list[y][oldname]) < min) {
			min = Number(array[i].sku_list[y][oldname])
		} else if (Number(array[i].sku_list[y][oldname]) > max) {
			max = Number(array[i].sku_list[y][oldname]);
		}
	}
	return `￥${min.toFixed(2)}~${max.toFixed(2)}`;
},
toEdit(id){
	this.$router.push({
		path:`/commodity/devlist/edit/${id}`,
	})
},
list_form() {
	let search = {};
	if(this.form.name){
	Object.assign(search,{name:this.form.name})
	}
	if(this.form.status){
	Object.assign(search,{status:this.form.status})
	}
	return search;
},
},
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
.mainor_form form {
width: calc(100% - 100px);
}
}
/deep/.el-table .el-table__body tr:hover > td {
background: #fff !important;
}
/deep/.el-table tr.expanded + tr {
background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr > td {
background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr .mainex_ta {
background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr .mainex_ta th,
/deep/.el-table tr.expanded + tr .mainex_ta tr {
background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr:hover {
background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr:hover > td {
background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr .el-table tr:hover {
background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr .el-table tr:hover > td {
background: #fafafa !important;
}
</style>
